import React, { Component } from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import regexp from '@utils/regexp'
import secretFun from '@utils/secret'
import http from '@utils/http'
import Dialog from '../../components/dialog/dialog'
import { getUser } from '../../actions/userActions'
import './index.less'

class Index extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            // 显示正则
            reg: regexp.email.toString(),

            // 加密字符串
            secretString: "yueqi123",

            // 姓名
            name: "",

            // 弹窗信息
            dialogInfo: {
                show: false,
                info: {
                    name: '越祈'
                }
            }
        }
    }

    componentWillUnmount() {
        this.clearLocal();
    }

    // 获取正则
    useReg = () => {
        const num = Math.ceil(Math.random() * 6);

        switch(num) {
            case 1: 
                this.setState({
                    reg: regexp.mobile.toString()
                })
                break;
            case 2: 
                this.setState({
                    reg: regexp.password.toString()
                })
                break;
            case 3: 
                this.setState({
                    reg: regexp.number.toString()
                })
                break;
            case 4: 
                this.setState({
                    reg: regexp.letter.toString()
                })
                break;
            default:
                this.state = {
                    reg: regexp.email.toString()
                }
                return;
        }
        
    }

    // 存储信息到本地
    saveLocal = () => {
        // 存储信息
        store.set('name', '越祈 · 流翼')

        // 获取信息
        this.setState({
            name: store.get('name')
        })
    }

    // 清空本地信息
    clearLocal = () => {
        store.clear();
    }

    // 加密字符串
    secretPassword = () => {
        let password = 'yueqi123';
        this.setState({
            secretString: secretFun.secret(password)
        })
    }

    // 显示/关闭弹窗
    showDialog = () => {
        this.setState({
            dialogInfo: {
                show: true,
                info: {
                    name: '越祈'
                }
            }
        })
    }

    // 关闭弹窗
    closeDialog = () => {
        this.setState({
            dialogInfo: {
                show: false,
                info: {
                    name: '越祈'
                }
            }
        })
    }

    render() {
        const { reg, secretString, name, dialogInfo } = this.state
        const { userInfo } = this.props;
        return (
            <div className="index">               
                <div className="container">

                    {/* 获取数据， 更新store */}
                    <div className="function">
                        <Button type="primary" onClick={e => this.props.getUser()}>更新数据</Button>
                        <p className="name">我的名字{userInfo.name}</p>
                    </div>
                    
                    {/* 使用正则 */}
                    <div className="function">
                        <Button type="primary" onClick={e => this.useReg()}>使用正则</Button>
                        <p className="name">{reg}</p>
                    </div>

                    {/* 加密方法 */}
                    <div className="function">
                        <Button type="primary" onClick={e => this.secretPassword()}>加密数据</Button>
                        <p className="name">{secretString}</p>
                    </div>

                    {/* 本地存储 */}
                    <div className="function">
                        <Button type="primary" onClick={e => this.saveLocal()}>存储信息</Button>
                        <p className="name">本地信息: {name}</p>
                    </div>

                    {/* 显示弹窗 */}
                    <div className="function">
                        <Button type="primary" onClick={e => this.showDialog()}>显示弹窗</Button>
                        <p className="name">弹窗信息: {name}</p>
                    </div>
                </div>

                {/* 弹窗 */}
                {
                    dialogInfo.show ? <Dialog dialogInfo={dialogInfo} close={this.closeDialog} /> : null
                }
                
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.userInfo
    }
}

const mapDispatchToProps = (dispatch) => ({
    getUser: bindActionCreators(getUser, dispatch)
})

const IndexContainer = connect(mapStateToProps, mapDispatchToProps)(Index)

export default IndexContainer